<template>
  <div class="list">
    <slot name="title"></slot>
    <div class="list-cartoon">
      <ul>
        <li
          v-for="(i, index) in recommend"
          :key="index"
          :class="{ active: i.select }"
        >
          <div class="one" @click="season_id(i.item_id, index)">
            <div><img :src="i.image" /></div>
            <p class="list-cartoon-title">{{ i.title }}</p>
            <p class="list-cartoon-intro" v-if="i.comic_info">
              {{ i.comic_info.tags[0] }} {{ i.comic_info.tags[1] }}
            </p>
            <p class="list-cartoon-intro" v-if="i.last_ord">
              更新到第{{ i.last_ord }}话
            </p>
          </div>
        </li>
        <slot></slot>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "CartoonList",
  props: ["recommend", "remove"],
  data() {
    return {
      isactive: -1,
    };
  },
  methods: {
    season_id(id, index) {
      // console.log(this.remove);
      if (this.remove != true) {
        this.url = `/detail?id=${id}`;
        this.$router.push(`${this.url}&isLog=${this.$route.query.isLogin}`);
      } else {
        if (this.recommend[index].select == 0) {
          this.recommend[index].select = 1;
        } else {
          this.recommend[index].select = 0;
        }
      }
    },
  },
};
</script>

<style lang='scss' scoped>
@import "@/static/common/base.scss";
.list {
  padding: $p;
  background-color: #fff;
  width: 100%;
  .list-cartoon {
    ul {
      width: 100%;
      display: flex;
      align-items: center;
      // justify-content: space-between;
      flex-wrap: wrap;
      li:nth-child(3n) {
        margin-right: 0;
      }
      .active {
        // opacity: 0.5;
        border: 2px solid $bgc;
      }
      li {
        width: 31%;
        overflow: hidden;
        margin-bottom: 5.3333vw;
        margin-right: 3.1vw;

        .one {
          height: 46.1333vw;
          width: 100%;
          div {
            width: 100%;
            height: 37.8667vw;
            img {
              width: 100%;
              height: 100%;
            }
          }
          p {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .list-cartoon-title {
            font-size: 3.2vw;
            height: 4vw;
            font-weight: 600;
          }
          .list-cartoon-intro {
            font-size: 2.6667vw;
            color: #b8bbbe;
            height: 4.2667vw;
          }
        }
      }
    }
  }
}
</style>